<template>
    <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AddModel ref="add_model" @getModelList="getModelList" />
        <EditModel ref="edit_model" @getEditModel="getEditModel" />
        <TimeDetails ref="time_model" />
        <div class="com_box">
            <div class="time_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <el-popover placement="bottom-start" width="380" v-model="is_model">
                        <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                            <div class="flexbox flexcenter">
                                <img src="../../assets/img/model_icon.svg" alt="" class="select_icon">
                                <span class="select_text">{{modelCheck.name?modelCheck.name:'请选择模板'}}</span>
                            </div>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <div class="time_model">
                            <div class="tm_title font_16 color_01">模板</div>
                            <el-input placeholder="请输入模板名称" size="small" class="filterInput" v-model="filterText" clearable></el-input>
                            <div class="yusuan_list">
                                <div class="yusuan_item flexbox flexcenter flexbetween" @click="changeModel(item,index)" :class="{'active':item.id==queryInfo.template_id}" v-for="(item,index) in filteredData()" :key="index">
                                    <img src="../../assets/img/market_checked.svg" alt="" class="ys_check">
                                    <div class="font_14 color_01">{{item.name}}</div>
                                    <div class="yusuan_edit flexbox flexcenter">
                                        <span class="icon_btn" @click.stop="editTimeModel(item,index)"><img src="../../assets/img/edit_icon.svg" alt=""></span>
                                        <span class="icon_btn" v-if="modelList.length>1" @click.stop="deletModel(item,index)"><img src="../../assets/img/ys_icon2.svg" alt=""></span>
                                    </div>
                                </div>
                            </div>
                            <el-button plain size="small" style="width:100%" @click="addTimeModel">添加模板</el-button>
                        </div>
                    </el-popover>

                    <el-select v-model="queryInfo.template_advertiser_id" @change="changeUser" placeholder="账户" style="margin-left:10px;width:285px" class="user_select">
                        <div slot="prefix" class="select_pre flexbox flexcenter">
                            <img src="../../assets/img/account_icon.svg" alt="">
                        </div>
                        <el-option label="全部" value="0" v-if="modelCheck.advertiser"></el-option>
                        <el-option :label="item.advertiser_name" :value="item.template_advertiser_id" v-for="(item,index) in modelCheck.advertiser" :key="index"></el-option>
                    </el-select>
                </div>
                <div class="flexbox flexcenter">
                    <!-- <el-button plain size="small" class="plain_blue" @click="toComparsion">
                        <div class="flexbox flexcenter flexjust">
                            <svg width="14" height="10" viewBox="0 0 14 10" class="fill_svg btn_svg" fill="#4475FF" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.06727 0.0828735H5.613L3.52088 7.23757L1.42876 0.0828735H0L2.98509 9.91713H4.05666L7.06727 0.0828735Z" fill="inherit" />
                                <path d="M14 7.11326C14 6.27072 13.7576 5.5663 13.2601 5.09669C12.8774 4.72376 12.4054 4.50276 11.5634 4.36464L10.5301 4.19889C10.1092 4.12983 9.73923 3.96409 9.5096 3.74309C9.26722 3.50829 9.16517 3.19061 9.16517 2.83149C9.16517 1.96133 9.75198 1.29834 10.8236 1.29834C11.589 1.29834 12.2396 1.4779 12.8009 2.05801L13.6811 1.11879C12.9029 0.331493 12.061 0 10.8618 0C8.97382 0 7.8257 1.17403 7.8257 2.88674C7.8257 3.68785 8.04257 4.30939 8.48906 4.76519C8.88452 5.16575 9.47133 5.44199 10.2112 5.55249L11.2828 5.71823C11.8186 5.80111 12.0482 5.89779 12.2778 6.1326C12.5202 6.3674 12.635 6.72652 12.635 7.1547C12.635 8.10773 11.9462 8.66022 10.7598 8.66022C9.82852 8.66022 9.10139 8.43923 8.43803 7.72099L7.51954 8.70166C8.387 9.6547 9.36928 10 10.7343 10C12.635 10 14 8.92265 14 7.11326Z" fill="inherit" />
                            </svg>
                            数据对比
                        </div>
                    </el-button> -->
                    <el-button plain size="small" class="plain_blue" @click="toAdvertSeries">
                        广告系列
                    </el-button>
                    <el-button plain size="small" class="plain_blue" @click="toAdvertGroup">
                        广告组
                    </el-button>
                    <el-button plain size="small" class="plain_blue" @click="toPlan">
                        广告
                    </el-button>
                </div>
            </div>
            <div class="pd_20">
                <div class="time_title">总计</div>
            </div>
            <div class="time_count flexbox flexcenter">
                <div class="tc_item flexbox flexcolumn flexjust">
                    <div class="tc_text">消耗</div>
                    <div class="tc_num">{{countData.stat_cost?countData.stat_cost:0}}</div>
                </div>
                <div class="tc_item flexbox flexcolumn flexjust">
                    <div class="tc_text">转化销售额</div>
                    <div class="tc_num">{{countData.pay_order_amount?countData.pay_order_amount:0}}</div>
                </div>
                <div class="tc_item flexbox flexcolumn flexjust">
                    <div class="tc_text">ROI</div>
                    <div class="tc_num">{{countData.roi?countData.roi:0}}</div>
                </div>
            </div>
        </div>
        <div class="com_box pd_20" style="margin-top:20px">
            <div class="time_title">时段数据</div>
            <div class="flexbox flexcenter time_rank">
                <span class="font_14 color_01" style="margin-right:10px">时间粒度：</span>
                <el-radio-group v-model="queryInfo.during" size="small" @change="changeTime()">
                    <el-radio-button label="5">5分钟</el-radio-button>
                    <el-radio-button label="10">10分钟</el-radio-button>
                    <el-radio-button label="30">30分钟</el-radio-button>
                    <el-radio-button label="60">60分钟</el-radio-button>
                </el-radio-group>
            </div>
            <el-table :data="tableData" class="com_table" max-height="700">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据，请选择模板</div>
                </div>
                <el-table-column prop="segmentation_during" label="时段" min-width="120">
                </el-table-column>
                <el-table-column prop="segmentation_cost" label="时段消耗" min-width="120">
                </el-table-column>
                <el-table-column prop="segmentation_gmv" label="转化销售额" min-width="120">
                </el-table-column>
                <el-table-column prop="segmentation_roi" label="ROI" min-width="120">
                </el-table-column>
                <el-table-column prop="" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="timeUserDetails(scope.row)">账户详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page_box flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import AddModel from "./model/AddModel";
import EditModel from "./model/EditModel";
import TimeDetails from "./model/TimeDetails";
export default {
    components: {
       AddModel,
       EditModel,
       TimeDetails
    },
    name: "",
    data() {
        return {
            loading: false,
            is_model: false,
            filterText:'',
            modelCheck: {},
            modelList: [],
            countData: {},
            queryInfo: {
                template_advertiser_id: "",
                template_id: "",
                during: "5",
                page: 1,
                limit: 20,
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getModelList();
        let sessionForm = JSON.parse(
            window.sessionStorage.getItem("tktimeQuery")
        );
        if (sessionForm && sessionForm.queryInfo.template_id) {
            this.modelCheck = sessionForm.modelCheck;
            this.queryInfo = sessionForm.queryInfo;
            this.getDuringList(this.queryInfo.page);
            this.getCountList();
        }
    },
    beforeDestroy() {
        if (this.$route.meta.current !== "/adminapi/Tiktokboard/duringCount") {
            window.sessionStorage.removeItem("tktimeQuery");
        }
    },
    methods: {
        //获取模板列表
        async getModelList() {
            const { data: res } = await this.$http.post(
                "adminapi/tiktokboard/templateList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.modelList = res.data;
                if(this.modelCheck.id){
                    let a = this.modelList.filter(item=>{return item.id==this.modelCheck.id})[0]
                    this.modelCheck = JSON.parse(JSON.stringify(a))
                    this.sesstionData();
                }
            }
        },

        //获取时段列表
        async getDuringList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/tiktokboard/duringCount",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
                this.sesstionData();
            }
        },

        //获取总计数据
        async getCountList() {
            const { data: res } = await this.$http.post(
                "adminapi/tiktokboard/allCount",
                {
                    template_advertiser_id:
                        this.queryInfo.template_advertiser_id,
                    template_id: this.queryInfo.template_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.countData = res.data;
                this.sesstionData();
            }
        },

        // 账户详情
        timeUserDetails(row) {
            let data = {
                template_advertiser_id: this.queryInfo.template_advertiser_id,
                template_id: this.queryInfo.template_id,
                during: this.queryInfo.during,
                time: row.segmentation_during,
                day:row.day,
            };
            this.$refs.time_model.getData(data);
        },

        // 切换模板
        changeModel(item) {
            this.is_model = false;
            this.modelCheck = item;
            this.queryInfo.template_advertiser_id = "0";
            this.queryInfo.template_id = item.id;
            this.getDuringList(1);
            this.getCountList();
        },

        // 账户切换
        changeUser() {
            this.getDuringList(1);
            this.getCountList();
        },

        // 时间颗粒选择
        changeTime() {
            this.getDuringList(1);
        },

        // 添加模板
        addTimeModel() {
            this.$refs.add_model.getData()
        },

        // 编辑模板
        editTimeModel(item) {
            this.$refs.edit_model.getData(item)
        },
        getEditModel(id){
            this.getModelList()
            if(this.modelCheck.id==id){
                this.getDuringList(1);
                this.getCountList();
            }
        },


        // 删除模板
        deletModel(item, index) {
            this.$confirm("是否要删除该模板?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/tiktokboard/templateDelete",
                        {
                            template_id: item.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.modelList.splice(index,1)
                        if(this.modelCheck.id==item.id){
                            this.modelCheck = this.modelList[0]
                            this.queryInfo.template_advertiser_id = '0'
                            this.queryInfo.template_id = this.modelList[0].id
                            this.getDuringList(1);
                            this.getCountList();
                        }
                        this.sesstionData();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {});
        },

        // 筛选模板
        filteredData(){
            var list = this.modelList,
                query = this.filterText
            if(!query){
                return list
            }
            query = query.trim()
            list = list.filter(item=>{
                if(item.name){
                    if(item.name.indexOf(query)!==-1){
                        return item
                    }
                }
            })

            return list
        },

        // 跳转广告计划
        toPlan() {
            let data = {
                modelCheck: this.modelCheck,
                template_advertiser_id: this.queryInfo.template_advertiser_id,
                template_id: this.queryInfo.template_id,
            };
            let moedel_data = JSON.stringify(data);
            if (!this.queryInfo.template_id) {
                this.$message.error("请先选择模板！");
                return;
            }
            // this.$router.push({
            //     path: "/advertisingplan",
            //     query: {
            //         moedel_data: moedel_data,
            //     },
            // });
            let routeUrl = this.$router.resolve({
                path: "/tk_advert_plan",
                query: {
                    moedel_data: moedel_data,
                },
            });
            window.open(routeUrl.href, "_blank");
        },

        // 跳转广告组
        toAdvertGroup() {
            let data = {
                modelCheck: this.modelCheck,
                template_advertiser_id: this.queryInfo.template_advertiser_id,
                template_id: this.queryInfo.template_id,
            };
            let moedel_data = JSON.stringify(data);
            if (!this.queryInfo.template_id) {
                this.$message.error("请先选择模板！");
                return;
            }
            let routeUrl = this.$router.resolve({
                path: "/tk_advert_group",
                query: {
                    moedel_data: moedel_data,
                },
            });
            window.open(routeUrl.href, "_blank");
            // this.$router.push({
            //     path: "/advertgroup",
            //     query: {
            //         moedel_data: moedel_data,
            //     },
            // });
        },

        // 跳转系列
        toAdvertSeries() {
            let data = {
                modelCheck: this.modelCheck,
                template_advertiser_id: this.queryInfo.template_advertiser_id,
                template_id: this.queryInfo.template_id,
            };
            let moedel_data = JSON.stringify(data);
            if (!this.queryInfo.template_id) {
                this.$message.error("请先选择模板！");
                return;
            }
            let routeUrl = this.$router.resolve({
                path: "/tk_advert_series",
                query: {
                    moedel_data: moedel_data,
                },
            });
            window.open(routeUrl.href, "_blank");
            // this.$router.push({
            //     path: "/advertgroup",
            //     query: {
            //         moedel_data: moedel_data,
            //     },
            // });
        },

        // 跳转数据对比
        toComparsion() {
            let data = {
                modelCheck: this.modelCheck,
                template_advertiser_id: this.queryInfo.template_advertiser_id,
                template_id: this.queryInfo.template_id,
            };
            let moedel_data = JSON.stringify(data);
            if (!this.queryInfo.template_id) {
                this.$message.error("请先选择模板！");
                return;
            }
            // this.$router.push({
            //     path: "/tk_data_comparsion",
            //     query: {
            //         moedel_data: moedel_data,
            //     },
            // });
            let routeUrl = this.$router.resolve({
                path: "/tk_data_comparsion",
                query: {
                    moedel_data: moedel_data,
                },
            });
            window.open(routeUrl.href, "_blank");
        },

        sesstionData() {
            let sessionForm = {
                modelCheck: this.modelCheck,
                queryInfo: this.queryInfo,
            };
            window.sessionStorage.setItem(
                "tktimeQuery",
                JSON.stringify(sessionForm)
            );
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDuringList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.getDuringList(val);
        },
    },
};
</script>


<style scoped>
.time_head {
    height: 80px;
    border-bottom: 1px solid #ebebeb;
    padding: 0 20px;
}
.select_icon {
    margin-right: 10px;
}
.select_box {
    width: 260px;
}
.select_pre {
    height: 100%;
}
.time_title {
    font-size: 16px;
    color: #17233d;
    line-height: 22px;
    padding-left: 10px;
    position: relative;
    font-weight: bold;
}
.time_title::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 12px;
    background-color: #4475ff;
    border-radius: 5px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.time_count {
    padding: 0 20px;
}
.tc_item {
    background-color: #fafcfe;
    border-radius: 4px;
    height: 88px;
    width: 282px;
    padding: 0 16px;
    margin-bottom: 20px;
    margin-right: 12px;
    box-sizing: border-box;
}
.tc_num {
    font-family: D-DIN;
    font-weight: bold;
    font-size: 20px;
    line-height: 17px;
    color: #17233d;
    height: 17px;
    margin-top: 8px;
}
.tc_text {
    font-size: 14px;
    color: #616c85;
    line-height: 20px;
    height: 20px;
}
.time_rank {
    margin-top: 20px;
}
.page_box {
    padding: 0;
}
.com_table {
    margin-top: 20px;
}
.time_model {
    padding: 8px;
}
.yusuan_list {
    margin-top: 0;
    margin-bottom: 20px;
}
.time_tag {
    padding: 0 8px;
    line-height: 21px;
    height: 21px;
    font-size: 12px;
    color: #616c85;
    border-radius: 2px;
    margin-right: 10px;
    background-color: rgba(165, 177, 209, 0.08);
}
.tm_title{
    text-align: left;
}
.filterInput{
    margin: 10px 0;
}
</style>

<style>
.user_select .el-input__suffix .el-icon-arrow-up:before {
    content: "";
    color: #17233d;
}
</style>

